<template>
  <div 
    class="layer-item" 
    :class="{ 'is-selected': isSelected, 'is-group': layer.type === 'group' }"
    @click="emit('select', layer.id)"
  >
    <div class="layer-item-content">
      <div class="layer-controls">
        <el-button 
          class="visibility-toggle" 
          :icon="layer.visible ? 'el-icon-view' : 'el-icon-hide'"
          size="mini" 
          @click.stop="emit('toggle-visibility', layer.id)"
        ></el-button>
        
        <el-button 
          class="lock-toggle" 
          :icon="layer.locked ? 'el-icon-lock' : 'el-icon-unlock'"
          size="mini" 
          @click.stop="emit('toggle-lock', layer.id)"
        ></el-button>
      </div>
      
      <div class="layer-icon">
        <i :class="getLayerIcon(layer.type)"></i>
      </div>
      
      <div class="layer-name">
        {{ layer.name }}
      </div>
    </div>
    
    <div v-if="layer.type === 'group' && layer.children && layer.children.length > 0" class="layer-children">
      <LayerItem 
        v-for="child in layer.children" 
        :key="child.id" 
        :layer="child" 
        :isSelected="isSelected"
        @select="emit('select', $event)"
        @toggle-visibility="emit('toggle-visibility', $event)"
        @toggle-lock="emit('toggle-lock', $event)"
      />
    </div>
  </div>
</template>

<script setup>
import { defineProps, defineEmits } from 'vue';

const props = defineProps({
  layer: {
    type: Object,
    required: true
  },
  isSelected: {
    type: Boolean,
    default: false
  }
});

const emit = defineEmits(['select', 'toggle-visibility', 'toggle-lock']);

// 根据图层类型获取对应的图标
const getLayerIcon = (type) => {
  switch (type) {
    case 'text':
      return 'el-icon-notebook-1';
    case 'rectangle':
      return 'el-icon-box';
    case 'circle':
      return 'el-icon-football';
    case 'triangle':
      return 'el-icon-warning-outline';
    case 'line':
      return 'el-icon-minus';
    case 'path':
      return 'el-icon-edit';
    case 'image':
      return 'el-icon-picture-outline';
    case 'group':
      return 'el-icon-folder';
    default:
      return 'el-icon-document';
  }
};
</script>

<style scoped>
.layer-item {
  padding: 6px 8px;
  border-radius: 4px;
  background-color: #f5f7fa;
  margin-bottom: 5px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.layer-item:hover {
  background-color: #e6f1fc;
}

.layer-item.is-selected {
  background-color: #ecf5ff;
  border-left: 2px solid #409EFF;
}

.layer-item-content {
  display: flex;
  align-items: center;
  gap: 5px;
}

.layer-controls {
  display: flex;
  gap: 2px;
}

.visibility-toggle, .lock-toggle {
  padding: 2px;
  border: none;
  background: transparent;
}

.layer-icon {
  color: #606266;
  font-size: 14px;
  width: 20px;
  text-align: center;
}

.layer-name {
  flex: 1;
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.layer-children {
  margin-top: 5px;
  margin-left: 20px;
}

.is-group {
  border: 1px dashed #c0c4cc;
}
</style>